<!--
 * @Author: Wayne 13235388225@163.com
 * @Date: 2023-09-20 11:44:29
 * @LastEditors: Wayne 13235388225@163.com
 * @LastEditTime: 2023-09-21 15:43:34
 * @FilePath: \vue-element-admin\src\views\hotUpdate\hotUpdate.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="package_detail_container">
    <div class="package_detail_box">
      <el-form ref="formPakcage" :model="packageForm" label-width="80px">
        <el-form-item label="名称">
          <el-input v-model="packageForm.name" class="package_input"></el-input>
        </el-form-item>

        <el-form-item label="标题">
          <el-input
            v-model="packageForm.title"
            class="package_input"
          ></el-input>
        </el-form-item>

        <el-form-item label="副标题">
          <el-input
            v-model="packageForm.se_title"
            class="package_input"
          ></el-input>
        </el-form-item>

        <el-form-item label="金额">
          <el-input
            v-model="packageForm.money"
            class="package_input"
          ></el-input>
        </el-form-item>

        <el-form-item label="积分">
          <el-input
            v-model="packageForm.integral"
            class="package_input"
          ></el-input>
        </el-form-item>

        <el-form-item label="分类">
          <!-- <el-input v-model="packageForm.type"></el-input> -->
          <el-select v-model="packageForm.type" placeholder="请选择">
            <el-option
              v-for="item in typeOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="库存" class="package_input">
          <el-input v-model="packageForm.inventory"></el-input>
        </el-form-item>

        <el-form-item label="已售数量" class="package_input">
          <el-input v-model="packageForm.sold_num"></el-input>
        </el-form-item>

        <el-form-item label="是否上架">
          <!-- <el-input v-model="packageForm.sold_num"></el-input> -->
          <el-switch
            v-model="packageForm.is_upload"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </el-form-item>

        <el-form-item label="权重" class="package_input">
          <el-input v-model="packageForm.weights"></el-input>
        </el-form-item>

        <el-form-item label="主图">
          <!-- <el-input
            v-model="packageForm.main_img"
            class="package_input"
          ></el-input> -->
          <el-upload
            style="margin-right: 30px"
            class="upload-demo"
            :action="uploadMainImgUrl"
            :on-success="onSuccessFile"
            :on-error="onErrorFile"
            :data="{ type: '0' }"
            list-type="text"
          >
            <el-button size="small" type="primary">上传主图</el-button>
          </el-upload>
          <span v-if="packageForm.main_img">
            <img
              :src="packageForm.main_img"
              alt=""
              class="main_img_box"
              @click="handlerMainImg(file)"
            />
          </span>
        </el-form-item>

        <el-form-item label="详情图">
          <!-- <el-input
            v-model="packageForm.detail"
            class="package_input"
          ></el-input> -->
          <tinymce ref="myEditor" @input="input"></tinymce>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { getAppPackageTypeList, addAppPackage } from "@/api/packageDetail";
import tinymce from "@/components/Tinymce/index.vue";
export default {
  components: {
    tinymce,
  },
  data() {
    return {
      packageForm: {
        name: "",
        title: "",
        se_title: "",
        money: "",
        integral: "",
        type: "",
        inventory: "",
        sold_num: "",
        is_upload: false,
        main_img: "",
        detail: "",
        weights: "",
      },
      content: "",
      typeOptions: [],
      uploadMainImgUrl: process.env.VUE_APP_BASE_API + "/app/uploadFiles", // 主图url
    };
  },
  mounted() {
    this.getAppPackageTypeList();
  },
  methods: {
    input(val) {
      this.packageForm.detail = val;
    },

    // 查询全部商品类型
    getAppPackageTypeList() {
      getAppPackageTypeList().then((res) => {
        if (res.code == 1) {
          this.typeOptions = res.data;
        } else {
          this.$message.error(res.msg);
          return;
        }
      });
    },

    // 提交接口
    addAppPackage() {
      addAppPackage({
        name: this.packageForm.name,
        main_img: this.packageForm.main_img,
        detail: this.packageForm.detail,
        title: this.packageForm.title,
        se_title: this.packageForm.se_title,
        money: this.packageForm.money,
        integral: this.packageForm.integral,
        type: this.packageForm.type,
        inventory: this.packageForm.inventory,
        sold_num: this.packageForm.sold_num,
        is_upload: this.packageForm.is_upload,
        weights: this.packageForm.weights,
      }).then((res) => {
        if (res.code == 1) {
          this.message.success(res.msg);
        } else {
          this.$message.error(res.msg);
          return;
        }
      });
    },

    // 提交
    onSubmit() {
      let details = "";
      // this.$refs.myEditor.imgArr.forEach((item) => {
      //   details += `<p><img :src='${item.url}' width="${790}" height="${1116}"></img></p>`;
      // });
      // this.packageForm.detail = details;

      this.addAppPackage();
    },

    // 上传主图
    onSuccessFile(val) {
      this.packageForm.main_img = val.data.path;
    },
    onErrorFile(val) {
      this.apkValue = val.data.path;
    },
  },
};
</script>
<style lang="scss" scoped>
.package_detail_container {
  .package_detail_box {
    padding: 30px;

    .package_input {
      width: 300px;
    }

    .main_img_box {
      width: 200px;
      height: 200px;
    }
  }
}
</style>
